import React, { PureComponent } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomImage from '../image/CustomImage'
import CustomButton from '../button/CustomButton'
import LinearGradient from 'react-native-linear-gradient'

export default class CollectionBtn extends PureComponent {
  onCollectedClick = () => {
    const { isCollected, onCollected } = this.props
    onCollected(isCollected)
  }

  render() {
    const { isCollected } = this.props
    return (
      <CustomButton
        style={[styles.naviBtnBG]}
        onPress={this.onCollectedClick}
      >
        {
          isCollected ? (
            <LinearGradient
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 0 }}
              colors={['#FF9310', '#FFDC25']}
              style={[styles.naviBtnLinearGradient]}
            >
              <CustomImage source={require('src/imgC/home/btnFavoriteSelected.png')} />
            </LinearGradient>
          ) : (
              <CustomImage source={require('src/imgC/home/btnFavorite.png')} />
            )
        }
      </CustomButton>
    )
  }
}
CollectionBtn.propTypes = {
  isCollected: PropTypes.bool,
  onCollected: PropTypes.func.isRequired
}
CollectionBtn.defaultProps = {
  isCollected: false
}

const styles = StyleSheet.create({
  naviBtnBG: {
    marginHorizontal: ScaleS(2),
    width: ScaleS(44),
    height: ScaleS(28),
    backgroundColor: '#F5F5F5',
    borderRadius: ScaleS(14),
    justifyContent: 'center',
    alignItems: 'center'
  },
  naviBtnLinearGradient: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: ScaleS(14)
  }
})
